<template>
	<view>
		<tui-form ref="form"  :model="orderInfo">
			<tui-input :required="true" label="手机号" :lineLeft="false" placeholder="请输入手机号" v-model="orderInfo.phone"></tui-input>
			<tui-input :required="true" label="需求类型" disabled :lineLeft="false" placeholder="需求类型" v-model="orderInfo.reqType"></tui-input>
			<tui-input :required="true" label="预约时间" :lineLeft="false" placeholder="请选择预约时间" @click="showStartTime()" disabled
						 v-model="orderInfo.orderStartTime"></tui-input>
			<!-- 家政服务 -->
			<view v-if="orderInfo.reqType == '家政服务'">
				<tui-input :required="true" label="家政服务类型" :lineLeft="false" placeholder="请选择家政服务类型" 
				             @click="show('housemakeType')" disabled
							 v-model="orderInfo.housemakeType"></tui-input>
				<view class="order-address" @click="chooseAddress('housemakeAddress')">
					<view class="order-address-label"><span >*</span>服务地址</view>
					<view class="order-address-content" v-if="orderInfo.housemakeAddress.address != ''">
						<span>{{orderInfo.housemakeAddress.address}}</span>
						<span>{{orderInfo.housemakeAddress.linkman}} &nbsp;&nbsp; {{orderInfo.housemakeAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择服务地址
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
				<tui-input :required="true" label="房屋面积" type="number"  :min="10" :lineLeft="false"  v-model="orderInfo.housemakeSpace">
					<template slot="right">平方米</template>
				</tui-input>
				<tui-input :required="true" label="维修类型" 
				 @click="show('housemakeMtType')" disabled
				:lineLeft="false" placeholder="请选择维修类型" v-model="orderInfo.housemakeMtType"></tui-input>
			</view>
			
			<!-- 跑腿 -->
			<view v-if="orderInfo.reqType == '跑腿服务'">
				<tui-input :required="true" label="跑腿类型"
				@click="show('errandType')" disabled
				:lineLeft="false" placeholder="请选择跑腿类型" v-model="orderInfo.errandType"></tui-input>
				<!-- <tui-input label="取件地" :lineLeft="false" placeholder="请输入取件地" v-model="orderInfo.errandPickAddress"></tui-input> -->
				<view class="order-address" @click="chooseAddress('errandPickAddress')">
					<view class="order-address-label"><span >*</span>取件地</view>
					<view class="order-address-content" v-if="orderInfo.errandPickAddress.address != ''">
						<span>{{orderInfo.errandPickAddress.address}}</span>
						<span>{{orderInfo.errandPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.errandPickAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择取件地
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
				<!-- <tui-input label="送往地" :lineLeft="false" placeholder="请输入送往地" v-model="orderInfo.errandDestinateAddress"></tui-input> -->
				<view class="order-address" @click="chooseAddress('errandDestinateAddress')">
					<view class="order-address-label"><span >*</span>送往地</view>
					<view class="order-address-content" v-if="orderInfo.errandDestinateAddress.address != ''">
						<span>{{orderInfo.errandDestinateAddress.address}}</span>
						<span>{{orderInfo.errandDestinateAddress.linkman}} &nbsp;&nbsp; {{orderInfo.errandDestinateAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择送往地
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
				<tui-input :required="true" label="大小" :lineLeft="false" placeholder="请选择大小" v-model="orderInfo.errandSize"></tui-input>
				<tui-input :required="true" label="件数" type="number" :lineLeft="false"  v-model="orderInfo.errandNum">
					<template slot="right">件</template>
				</tui-input>
			</view>
			
			<!-- 居家养老 -->
			<view v-if="orderInfo.reqType == '居家养老'">
				<tui-input :required="true" label="养老服务类型"
				 @click="show('oldType')" disabled
				 :lineLeft="false" placeholder="请选择养老服务类型" v-model="orderInfo.oldType"></tui-input>
				<view v-if="orderInfo.oldType == '陪诊' || orderInfo.oldType == ''">
					<tui-input :required="true" label="服务医院" :lineLeft="false" placeholder="请输入服务医院" v-model="orderInfo.oldHospital"></tui-input>
					<tui-input :required="true" label="陪诊人" :lineLeft="false" placeholder="请输入陪诊人" v-model="orderInfo.oldPerson"></tui-input>
					<tui-input :required="true" label="陪诊特殊要求" :lineLeft="false" placeholder="请输入陪诊特殊要求" v-model="orderInfo.oldSpecialReq"></tui-input>
					
				</view>
				<!-- 居家养老简单打扫卫生 -->
				<view v-if="orderInfo.oldType == '简单打扫卫生' || orderInfo.oldType == ''">
					<!-- <tui-input label="上门地址" :lineLeft="false" placeholder="请输入上门地址" v-model="orderInfo.oldPickAddress"></tui-input> -->
					<view class="order-address" @click="chooseAddress('oldPickAddress')">
						<view class="order-address-label"><span >*</span>上门地址</view>
						<view class="order-address-content" v-if="orderInfo.oldPickAddress.address != ''">
							<span>{{orderInfo.oldPickAddress.address}}</span>
							<span>{{orderInfo.oldPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.oldPickAddress.linkphone}}</span>
						</view>
						<view class="order-address-placeholder" v-else>
							请选择上门地址
						</view>
						<view class="order-address-icon">
							<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
						</view>
					</view>
					<tui-input :required="true" label="房屋面积" type="number" :lineLeft="false" v-model="orderInfo.oldSpace">
						<template slot="right">平方米</template>
					</tui-input>
					
				</view>
				
			</view>
			<!-- 接送小孩 -->
			<view v-if="orderInfo.reqType == '接送小孩'">
				<!-- <tui-input label="去哪里接" :lineLeft="false" placeholder="请选择去哪里接" v-model="orderInfo.kidsPickAddress"></tui-input> -->
				<view class="order-address" @click="chooseAddress('kidsPickAddress')">
					<view class="order-address-label"><span >*</span>去哪里接</view>
					<view class="order-address-content" v-if="orderInfo.kidsPickAddress.address != ''">
						<span>{{orderInfo.kidsPickAddress.address}}</span>
						<span>{{orderInfo.kidsPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.kidsPickAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择去哪里接
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
				<!-- <tui-input label="送到哪里" :lineLeft="false" placeholder="请选择送到哪里" v-model="orderInfo.kidsDestinateAddress"></tui-input> -->
				<view class="order-address" @click="chooseAddress('kidsDestinateAddress')">
					<view class="order-address-label"><span >*</span>送到哪里</view>
					<view class="order-address-content" v-if="orderInfo.kidsDestinateAddress.address != ''">
						<span>{{orderInfo.kidsDestinateAddress.address}}</span>
						<span>{{orderInfo.kidsDestinateAddress.linkman}} &nbsp;&nbsp; {{orderInfo.kidsDestinateAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择送到哪里
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
				<tui-input :required="true" label="小孩姓名" :lineLeft="false" placeholder="请输入小孩姓名" v-model="orderInfo.kidsName"></tui-input>
				<tui-input :required="true" label="所在班级" :lineLeft="false" placeholder="请输入所在班级" v-model="orderInfo.kidsClass"></tui-input>
				
			</view>
			<!-- 上门煮饭 -->
			<view v-if="orderInfo.reqType == '上门煮饭'">
				<view class="order-address" @click="chooseAddress('foodAddress')">
					<view class="order-address-label"><span >*</span>上门地址</view>
					<view class="order-address-content" v-if="orderInfo.foodAddress.address != ''">
						<span>{{orderInfo.foodAddress.address}}</span>
						<span>{{orderInfo.foodAddress.linkman}} &nbsp;&nbsp; {{orderInfo.foodAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择上门地址
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
				<tui-textarea :required="true" label="煮饭要求" flexStart  height="25rpx"  placeholder="请输入煮饭要求" v-model="orderInfo.foodReq"></tui-textarea>
			</view>
			<!-- 宠物服务 -->
			<view v-if="orderInfo.reqType == '宠物服务'">
				<tui-input :required="true" label="宠物类型"
				@click="show('petType')" disabled
				:lineLeft="false" placeholder="请选择宠物类型" v-model="orderInfo.petType"></tui-input>
				<!-- <tui-input label="取宠地" :lineLeft="false" placeholder="请输入取宠地" v-model="orderInfo.petPickAddress"></tui-input> -->
				<view class="order-address" @click="chooseAddress('petPickAddress')">
					<view class="order-address-label"><span >*</span>取宠地</view>
					<view class="order-address-content" v-if="orderInfo.petPickAddress.address != ''">
						<span>{{orderInfo.petPickAddress.address}}</span>
						<span>{{orderInfo.petPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.petPickAddress.linkphone}}</span>
					</view>
					<view class="order-address-placeholder" v-else>
						请选择取宠地
					</view>
					<view class="order-address-icon">
						<tui-icon name="arrowright" :size="25" color="#DCDCDC"></tui-icon>
					</view>
				</view>
			</view>
			
			<!-- 上传图片 -->
			<view class="order-imgs">
				<view class="order-imgs-label">图片描述</view>
				<tui-upload :value="imageData" :serverUrl="serverUrl" :header="header" @complete="compile" @remove="remove"></tui-upload>
				
			</view>
			<!-- <tui-input :required="true" label="金额" type="number" :lineLeft="false" v-model="orderInfo.price">
				<template slot="right">元</template>
			</tui-input> -->
			
			
		</tui-form>
		<view>
			<tui-datetime ref="dateTime" :type="1"  :cancelColor="'#888'" :color="'#5677fc'"
			@confirm="confirmDate"></tui-datetime>
		</view>
		<tui-picker :show="pickShow" :pickerData="pickData" @hide="hide" @change="change">
		</tui-picker>
		
		<view class="sub-btn">
			<tui-button type="primary" @click="submit":loading="loading" :disabled="loading" shape="circle">提交</tui-button>
		</view>
		<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
	import tui from '@/common/httpRequest'
	const formValid = require("@/components/common/tui-validation/tui-validation.js")
export default {
	data(){
		return {
			imageData: [],//初始化图片
			serverUrl: tui.uploadUrl(),
			pickShow: false,
			pickData: [],
			header: {},
			loading: false,
			orderInfo: {
				phone: '',
				createUserAvatar: '',
				createUserName: '',
				reqType: '',
				orderStartTime: '',
				img: '',
				// 家政
				housemakeType: '',
				housemakeAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				},
				housemakeSpace: 0,
				housemakeMtType: '', // 维修类型Maintenance type
				// 跑腿
				errandType: '', // 跑腿类型
				errandPickAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, // 取件地
				errandDestinateAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, // 送往地
				errandSize: '', // 大小
				errandNum: 0, // 件数
				// 居家养老
				oldType: '', // 养老服务类型
				oldHospital: '', // 服务医院
				oldPerson: '', // 陪诊人
				oldSpecialReq: '', // 陪诊特殊要求
				oldPickAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, // 上门地址（简单打扫卫生）
				oldSpace: 0, //房屋面积
				// 上门煮饭
				foodAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, 
				foodReq: '', //煮饭要求
				// 接送小孩
				kidsPickAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, // 去哪里接
				kidsDestinateAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, // 送到哪里
				kidsName: '', // 小孩姓名
				kidsClass: '', // 所在班级
				// 宠物服务
				petType: '', // 宠物类型
				petPickAddress: {
					id: null,
					address: '', 
					detailAddress:'', 
					xLocation: null, 
					yLocation: null,
					linkman: '',
					linkphone: ''
				}, // 取宠地
				// price: 0,// 金额
			},
		    housemakeTypeList: [
				{text: '清洁卫生', value: '清洁卫生'},
				{text: '换灯', value: '换灯'},
				{text: '开锁', value: '开锁'},
				{text: '修理水管', value: '修理水管'},
			],
			errandTypeList: [
				{text: '就近帮买帮送', value: '就近帮买帮送'},
				{text: '快递代取', value: '快递代取'},
				{text: '代扔垃圾', value: '代扔垃圾'},
			],
			oldTypeList: [
				{text: '陪诊', value: '陪诊'},
				{text: '简单打扫卫生', value: '简单打扫卫生'},
			],
			petTypeList: [
				{text: '猫咪', value: '猫咪'},
				{text: '小狗', value: '小狗'},
				{text: '其他', value: '其他'},
			],
			housemakeMtTypeList: [
				{text: '家电维修', value: '家电维修'},
				{text: '家居维修', value: '家居维修'},
				{text: '数码办公维修', value: '数码办公维修'},
				{text: '水电维修', value: '水电维修'},
				{text: '其他', value: '其他'},
			],
			chooseItem: '',
			rules: [{
				name: 'housemakeAddress.address',
				rule: ['required'],
				msg: ['请选择地址']
			}]
		}
	},
	async onLoad(options)  {
		this.orderInfo.reqType = options.name;
		console.log(this.orderInfo.reqType);
		await this.$onLaunched;
		this.header = {
			appToken: uni.getStorageSync("app_token")
		}
		let userInfo = uni.getStorageSync("user_info");
		console.log(userInfo);
		this.orderInfo.phone = userInfo.mobile;
		this.orderInfo.createUserName = userInfo.nickname;
		this.orderInfo.createUserAvatar = userInfo.avatar;
	},
	methods: {
		compile(e){
			console.log(e);
			this.imageData = e.imgArr;
			console.log(this.imageData);
		},
		remove: function(e) {
			//移除图片
			console.log(e)
			let index = e.index
		},
		showStartTime(){
			this.$refs.dateTime.show();
		},
		confirmDate(e){
			console.log(e);
			this.orderInfo.orderStartTime = e.result + ':00';
		},
		show(item){
			let _this = this;
			_this.chooseItem = item;
			if(item == 'housemakeType'){
				_this.pickData = _this.housemakeTypeList;
			}else if(item == 'housemakeMtType'){
				_this.pickData = _this.housemakeMtTypeList;
			}else if(item == 'errandType'){
				_this.pickData = _this.errandTypeList;
			}else if(item == 'oldType'){
				_this.pickData = _this.oldTypeList;
			}else if(item == 'petType'){
				_this.pickData = _this.petTypeList;
			}
			_this.pickShow = true;
		},
		change(e) {
			console.log(this.chooseItem)
			this.orderInfo[this.chooseItem] = e.value;
		},
		hide(e) {
			this.pickShow = false
		},
		chooseAddress(item){
			uni.navigateTo({
				url: '/pages/community/orders/address/address?item='+item
			})
		},
		setAddress(data, item){
			this.orderInfo[item] = data;
		},
		submit(){
			this.loading = true;
			let imgUrl = this.imageData.join(",");
			this.orderInfo.img = imgUrl;
			if(this.valide(this.orderInfo)){
				this.$api.createOrder(this.orderInfo).then(res => {
					this.loading = false;
					if(res.success){
						
						this.$refs.toast && this.$refs.toast.show({
							title: '创建订单成功',
							icon: false
						});
						let page = getCurrentPages();
						let prevPage = page[page.length-2];
						prevPage.$vm.setLatestOrder(res.result);
						uni.navigateBack({delta: 1});
					}
				})
			}else{
				this.loading = false;
			}
			
		},
		valide(data){
			let flag = true;
			let msg = '';
			// 通用部分
			if(data.phone == ''){
				flag = false;
				msg = '请填写电话号码';
			}
			if(data.reqType == ''){
				flag = false;
				msg = '请选择需求类型';
			}
			if(data.orderStartTime == ''){
				flag = false;
				msg = '请选择预约时间';
			}
			// if(data.price == ''){
			// 	flag = false;
			// 	msg = '请输入金额';
			// }
			// 家政服务
			if(data.reqType == '家政服务'){
				if(data.housemakeType == ''){
					flag = false;
					msg = '请选择家政服务类型';
				}
				if(data.housemakeAddress.address == ''){
					flag = false;
					msg = '请选择家政服务地址';
				}
				if(data.housemakeSpace == 0){
					flag = false;
					msg = '请输入房屋面积';
				}
				// else if(data.housemakeMtType == ''){
				// 	flag = false;
				// 	msg = '请选择维修类型';
				// }
			}
			if(data.reqType == '跑腿服务'){
				if(data.errandType == ''){
					flag = false;
					msg = '请选择跑腿服务类型';
				}
				if(data.errandPickAddress.address == ''){
					flag = false;
					msg = '请选择取件地';
				}
				if(data.errandDestinateAddress.address == ''){
					flag = false;
					msg = '请选择送往地';
				}
				if(data.errandSize == ''){
					flag = false;
					msg = '请选择大小';
				}
				// else if(data.errandNum == 0){
				// 	flag = false;
				// 	msg = '请输入件数';
				// }
			}
			if(data.reqType == '居家养老'){
				if(data.oldType == ''){
					flag = false;
					msg = '请选择居家养老类型';
				}
				if(data.oldHospital == ''){
					flag = false;
					msg = '请输入服务医院';
				}
				if(data.oldPerson == ''){
					flag = false;
					msg = '请输入陪诊人';
				}
				if(data.oldSpecialReq == ''){
					flag = false;
					msg = '请输入陪诊特殊要求';
				}
				if(data.oldType == '简单打扫卫生'){
					if(data.oldSpace == 0){
						flag = false;
						msg = '请输入房屋面积';
					}
				}
			}
			if(data.reqType == '上门煮饭'){
				if(data.foodAddress.address == ''){
					flag = false;
					msg = '请选择上门煮饭地址';
				}
				if(data.foodReq == ''){
					flag = false;
					msg = '请输入上面煮饭要求';
				}
			}
			if(data.reqType == '接送小孩'){
				if(data.kidsPickAddress.address == ''){
					flag = false;
					msg = '请选择去哪里接';
				}
				if(data.kidsDestinateAddress.address == ''){
					flag = false;
					msg = '请选择送到哪里';
				}
				if(data.kidsName == ''){
					flag = false;
					msg = '请输入小孩姓名';
				}
				if(data.kidsClass == ''){
					flag = false;
					msg = '请输入所在班级';
				}
			}
			if(data.reqType == '宠物服务'){
				if(data.petType == ''){
					flag = false;
					msg = '请选择宠物类型';
				}
				if(data.petPickAddress.address == ''){
					flag = false;
					msg = '请选择取宠地';
				}
			}
			if(!flag){
				let params = {
					title: msg,
					icon: false
				}
				this.$refs.toast && this.$refs.toast.show(params);
			}
			
			return flag;
		}
	},
	
}
</script>

<style lang="scss">
	@import url("publish.css");
</style>